<template>
  <div class="report">
    <svg class="hidden">
      <svg id="icon-rewind" viewBox="0 0 36 20">
        <title>rewind</title>
        <path
          d="M16.315.061c.543 0 .984.44.984.984v17.217c0 .543-.44.983-.984.983L.328 10.391s-.738-.738 0-1.476C1.066 8.178 16.315.061 16.315.061zM35.006.061c.543 0 .984.44.984.984v17.217c0 .543-.44.984-.984.984L19.019 10.39s-.738-.738 0-1.475C19.757 8.178 35.006.06 35.006.06z"
        />
      </svg>
    </svg>
    <button ref="btn">kaiqi</button>

    <div class="demo2">
      <button
        v-particle:[`btn`]="{
          duration: 500,
          easing: 'easeOutQuad',
          speed: 0.1,
          particlesAmountCoefficient: 10,
          oscillationCoefficient: 180
        }"
      >
        123
      </button>
    </div>
    <div class="grid__item">
      <button class="action">
        <svg class="icon">
          <use xlink:href="#icon-rewind"></use>
        </svg>
      </button>
      <button class="particles-button">Send</button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import makeAnime from "@/assets/js/demo";
export default {
  name: "report",
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    makeAnime(Vue);
  },
  watch: {},
  methods: {},
  filters: {}
};
</script>

<style lang="scss">
.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icons */
.icon {
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto;
  fill: currentColor;
}

.grid__item {
  box-sizing: border-box;
  position: relative;
  height: 400px;
  width: 400px;
  padding-top: 175px;
  overflow: hidden;
  background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
}

.action {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background: none;
  margin: 2rem;
  color: #121019;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.action:focus {
  outline: none;
}

.particles {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
}

.particles-canvas {
  position: absolute;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.particles-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.particles-button {
  // transform: translateY(150px);
  position: relative;
  user-select: none;
  border-radius: 5px;
  background-color: #121019;
  color: white;
  border: 0;
  margin: 0;
  height: 50px;
  width: 100px;
}

.particles-button:focus {
  outline: none;
}
.demo2 {
  button {
    background-color: #121019;
    color: white;
    border: 0;
    height: 250px;
    width: 500px;
  }
}
</style>
